import { createRouter, createWebHistory } from 'vue-router';

// Import your main layout or App shell component if you have one
// import AppLayout from '../layouts/AppLayout.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        // Dynamically import the Home component
        component: () => import(/* webpackChunkName: "home-view" */ './components/HelloWorld.vue')
    },
    {
        path: '/about',
        name: 'About',
        // Dynamically import the About component
        // The /* webpackChunkName: "about-view" */ is a special comment
        // that tells Webpack (or Vite with rollup-plugin-vue) to name the generated chunk.
        component: () => import('./components/TheWelcome.vue')
    },
    {
        path: '/contact',
        name: 'Contact',
        // Dynamically import the About component
        // The /* webpackChunkName: "about-view" */ is a special comment
        // that tells Webpack (or Vite with rollup-plugin-vue) to name the generated chunk.
        component: () => import(/* webpackChunkName: "contact-view" */ './components/TheWelcome.vue')
    },
    {
        path: '/product/:id',
        name: 'ProductDetail',
        // Dynamically import the About component
    }
];

const router = createRouter({
    history: createWebHistory(''), // Or just createWebHistory() for Vite
    routes
});

export default router;